<template>
    <div>
        <el-table
                :data="tableData.records"
                stripe
                style="width: 100%">

            <el-table-column
                    type="index"
                    label="序号"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="name"
                    label="调度方式"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="byName"
                    label="创建人姓名"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="editName"
                    label="修改人姓名"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="createDate"
                    label="创建时间"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="updateDate"
                    label="修改时间"
                    width="180">
            </el-table-column>
            <el-table-column>
                <template slot="header" slot-scope="scope">
                    <el-button @click="insertDialogFormVisible = true">
                        新增
                    </el-button>
                    <el-dialog title="添加调度方式"
                               :visible.sync="insertDialogFormVisible"
                               :before-close="handleClose">
                        <el-form :model="From" status-icon ref="Form">
                            <el-form-item label="调度方式:" :label-width="formLabelWidth" prop="key">
                                <el-input v-model="From.name" autocomplete="off" style="width: 300px"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="insertDialogFormVisible = false">取 消</el-button>
                            <el-button @click="add()">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="openHandleDelete(scope.$index, scope.row)">删除
                    </el-button>
                    <el-button
                            size="mini"
                            @click="openEdit(scope.$index, scope.row)">修改
                    </el-button>
                    <el-dialog title="修改调度方式"
                               :visible.sync="updateDialogFormVisible"
                               :before-close="handleClose">
                        <el-form :model="editFrom" status-icon ref="Form">
                            <el-form-item label="调度方式:" :label-width="formLabelWidth" prop="key">
                                <el-input v-model="editFrom.name" autocomplete="off" style="width: 300px"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                            <el-button @click="edit(scope.$index, scope.row)">确 定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>
        <el-footer>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="tableData.current"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="tableData.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>
    </div>
</template>

<script>
    import Templates from "@/components/Templates";

    export default {
        name: 'WaresTypeManage',
        components: {Templates},
        data() {
            return {
                tableData: [
                ],
                From: {},
                editFrom:{},
                //弹窗大小
                formLabelWidth: '120px',
                insertDialogFormVisible: false,
                updateDialogFormVisible:false,
                Page:{
                    size:10,
                    current:1,
                },
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleSizeChange(val) {
                this.Page.size = val
                this.getPage()
            },
            handleCurrentChange(val) {
                this.Page.current = val
                this.getPage()
            },
            openHandleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.handleDelete(index, row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
            },
            openEdit(index,row){
                this.updateDialogFormVisible = true
                this.editFrom = row
            },

            edit(){
                this.axios.put('http://localhost:8092/WaresManageDetailType/editWaresManageDetailType/',this.editFrom).then(res => {
                    if (res.data.is == true) {
                        this.getPage()
                        this.tableData = res.data.data
                        this.updateDialogFormVisible = false
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            handleDelete(index, row) {
                this.axios.delete('http://localhost:8092/WaresManageDetailType/delWaresManageDetailType/'+row.id).then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.getPage()
                        this.tableData = res.data.data
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            add() {
                this.axios.post('http://localhost:8092/WaresManageDetailType/addWaresManageDetailType', this.From).then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.tableData = res.data.data
                        this.$message.success(res.data.msg);
                        this.insertDialogFormVisible = false
                        this.getPage()
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            getPage() {
                console.log(this.Page)
                this.axios.get('http://localhost:8092/WaresManageDetailType/getWaresManageDetailTypePage',{
                    params:{
                        current:this.Page.current,
                        size:this.Page.size
                    }
                }).
                then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.tableData = res.data.data
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
        mounted() {
            this.getPage()
        },
    }
</script>